<template>
  <div class="page-container router-view-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="title-section">
          <h1 class="page-title">管理员面板</h1>
          <p class="page-subtitle">超级管理员权限演示</p>
        </div>
      </div>
    </div>

    <!-- 页面内容 -->
    <div class="page-content">
      <div class="admin-panel">
        <!-- 用户信息 -->
        <el-card class="info-card">
          <template #header>
            <div class="card-header">
              <span>用户信息</span>
            </div>
          </template>
          <div class="user-info">
            <p><strong>用户名:</strong> {{ userStore.username }}</p>
            <p><strong>昵称:</strong> {{ userStore.nickname }}</p>
            <p><strong>角色:</strong> {{ userStore.roles.join(', ') }}</p>
            <p><strong>权限:</strong> {{ userStore.permissions.join(', ') }}</p>
            <p><strong>是否超级管理员:</strong> 
              <el-tag :type="userStore.isAdmin ? 'success' : 'info'">
                {{ userStore.isAdmin ? '是' : '否' }}
              </el-tag>
            </p>
          </div>
        </el-card>

        <!-- 权限测试 -->
        <el-card class="permission-card">
          <template #header>
            <div class="card-header">
              <span>权限测试</span>
            </div>
          </template>
          
          <div class="permission-tests">
            <!-- 单个权限测试 -->
            <div class="test-section">
              <h3>单个权限测试</h3>
              <div class="test-items">
                <el-button 
                  v-permission="'SYSTEM:USER:VIEW'"
                  type="primary"
                  @click="testPermission('SYSTEM:USER:VIEW')"
                >
                  系统用户查看权限
                </el-button>
                
                <el-button 
                  v-permission="'FINANCE:CNLS:VIEW'"
                  type="success"
                  @click="testPermission('FINANCE:CNLS:VIEW')"
                >
                  出纳日记账权限
                </el-button>
                
                <el-button 
                  v-permission="'BUSINESS:CONTRACT:VIEW'"
                  type="warning"
                  @click="testPermission('BUSINESS:CONTRACT:VIEW')"
                >
                  合同管理权限
                </el-button>
              </div>
            </div>

            <!-- 多权限测试 -->
            <div class="test-section">
              <h3>多权限测试（任一满足）</h3>
              <div class="test-items">
                <el-button 
                  v-permission="['SYSTEM:USER:VIEW', 'SYSTEM:USER:MANAGE']"
                  type="primary"
                  @click="testMultiplePermissions(['SYSTEM:USER:VIEW', 'SYSTEM:USER:MANAGE'])"
                >
                  用户管理权限（任一）
                </el-button>
                
                <el-button 
                  v-permission="['FINANCE:VIEW', 'FINANCE:MANAGE']"
                  type="success"
                  @click="testMultiplePermissions(['FINANCE:VIEW', 'FINANCE:MANAGE'])"
                >
                  财务管理权限（任一）
                </el-button>
              </div>
            </div>

            <!-- 角色测试 -->
            <div class="test-section">
              <h3>角色测试</h3>
              <div class="test-items">
                <el-button 
                  v-role="'ROLE_ADMIN'"
                  type="danger"
                  @click="testRole('ROLE_ADMIN')"
                >
                  超级管理员角色
                </el-button>
                
                <el-button 
                  v-role="['ROLE_ADMIN', 'ROLE_MANAGER']"
                  type="warning"
                  @click="testMultipleRoles(['ROLE_ADMIN', 'ROLE_MANAGER'])"
                >
                  管理员或经理角色
                </el-button>
              </div>
            </div>

            <!-- 功能测试 -->
            <div class="test-section">
              <h3>功能测试</h3>
              <div class="test-items">
                <el-button 
                  v-permission="'SYSTEM:USER:MANAGE'"
                  type="primary"
                  @click="showUserManagement"
                >
                  用户管理功能
                </el-button>
                
                <el-button 
                  v-permission="'FINANCE:CNLS:MANAGE'"
                  type="success"
                  @click="showCashFlowManagement"
                >
                  出纳日记账管理
                </el-button>
                
                <el-button 
                  v-permission="'BUSINESS:CONTRACT:MANAGE'"
                  type="warning"
                  @click="showContractManagement"
                >
                  合同管理功能
                </el-button>
              </div>
            </div>
          </div>
        </el-card>

        <!-- 权限工具函数测试 -->
        <el-card class="tool-card">
          <template #header>
            <div class="card-header">
              <span>权限工具函数测试</span>
            </div>
          </template>
          
          <div class="tool-tests">
            <el-button @click="testPermissionUtils">测试权限工具函数</el-button>
            <el-button @click="showUserPermissions">显示用户权限</el-button>
            <el-button @click="showUserRoles">显示用户角色</el-button>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useUserStore } from '@/stores/userStore'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { 
  hasPermission, 
  hasAnyPermission, 
  hasAllPermissions,
  isAdmin,
  getUserPermissions,
  getUserRoles
} from '@/utils/permission'
import '@/styles/page.css'

const userStore = useUserStore()
const router = useRouter()

// 测试单个权限
const testPermission = (permission) => {
  const result = hasPermission(permission)
  ElMessage.success(`权限 ${permission}: ${result ? '通过' : '拒绝'}`)
}

// 测试多个权限
const testMultiplePermissions = (permissions) => {
  const result = hasAnyPermission(permissions)
  ElMessage.success(`权限 ${permissions.join(', ')}: ${result ? '通过' : '拒绝'}`)
}

// 测试角色
const testRole = (role) => {
  const hasRole = userStore.roles.includes(role)
  ElMessage.success(`角色 ${role}: ${hasRole ? '拥有' : '无'}`)
}

// 测试多个角色
const testMultipleRoles = (roles) => {
  const hasRole = roles.some(r => userStore.roles.includes(r))
  ElMessage.success(`角色 ${roles.join(', ')}: ${hasRole ? '拥有' : '无'}`)
}

// 显示用户管理
const showUserManagement = () => {
  router.push('/user-list')
}

// 显示出纳日记账管理
const showCashFlowManagement = () => {
  router.push('/cash-flow-management')
}

// 显示合同管理
const showContractManagement = () => {
  router.push('/contract-management')
}

  // 测试权限工具函数
  const testPermissionUtils = () => {
    console.log('是否为超级管理员:', isAdmin())
    console.log('是否有用户查看权限:', hasPermission('SYSTEM:USER:VIEW'))
    console.log('是否有任一财务权限:', hasAnyPermission(['FINANCE:VIEW', 'FINANCE:MANAGE']))
    console.log('是否同时拥有所有权限:', hasAllPermissions(['SYSTEM:USER:VIEW', 'FINANCE:VIEW']))
    
    ElMessage.success('权限工具函数测试完成，请查看控制台')
  }

// 显示用户权限
const showUserPermissions = () => {
  const permissions = getUserPermissions()
  ElMessage.success(`用户权限: ${permissions.join(', ')}`)
}

// 显示用户角色
const showUserRoles = () => {
  const roles = getUserRoles()
  ElMessage.success(`用户角色: ${roles.join(', ')}`)
}
</script>

<style scoped>
.admin-panel {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

.info-card {
  grid-column: 1;
}

.permission-card {
  grid-column: 2;
  grid-row: 1 / 3;
}

.tool-card {
  grid-column: 1;
}

.user-info p {
  margin: 8px 0;
  line-height: 1.6;
}

.permission-tests {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.test-section {
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 16px;
}

.test-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.test-section h3 {
  margin: 0 0 12px 0;
  color: #374151;
  font-size: 16px;
}

.test-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tool-tests {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.card-header {
  font-weight: 600;
  color: #374151;
}

@media (max-width: 768px) {
  .admin-panel {
    grid-template-columns: 1fr;
  }
  
  .permission-card {
    grid-column: 1;
    grid-row: auto;
  }
  
  .test-items {
    flex-direction: column;
  }
}
</style> 